iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 2
1
Modern Web

玩轉 Storybook系列 第 2

玩轉 Storybook: Day 02 安裝

  • 分享至 

  • xImage
  •  

Install Storybook

安裝 Storybook 只需要在Terminal,切換到現有專案的根目錄後,簡單的執行一行指令

npx sb init

在安裝的過程中,Storybook會檢查現有專案的dependencies,然後依據專案現有框架,提供最佳的組裝方式。

從開始安裝到完成,檢查專案目錄下變更的檔案結構,會發現Storybook的安裝做了以下的步驟。

  • 安裝需要的相依套件
  • 在Package.json加上建置與執行Storybook的Script
  • 增加預設的 Storybook Config 檔案
  • 增加一些做為範例參考的樣版Story檔案

安裝完成後,就可以用以下指令執行 Storybook

npm run storybook

看到以下的畫面,就表示 Storybook 能正常運行

DEMO 操作的 Node.JS 版本,一律使用 v.12.18.3

我是使用nvm做為Node.JS版本的管理,在此建議大家搭配服用,效果更佳!

DEMO: 在 VUE 的現有專案安裝 Storybook

使用 Vue CLI 建置專案

$ npm install -g @vue/cli
$ vue create vue-storybook-sample
$ cd vue-storybook-sample
$ npm run serve

把Storybook功能加入Vue的現有專案中

npx sb init

接下來,Storybook的服務會安裝需要的相依套件

Storybook會在Package.json加上建置與執行Storybook的Script

// package.json
"scripts": {
  ...
  "storybook": "start-storybook -p 6006",
  "build-storybook": "build-storybook"
},
npm run storybook

DEMO: 在 Angular 的現有專案安裝 Storybook

使用 Angular CLI 建置專案

$ npm install -g @angular/cli
$ ng new angular-storybook-sample
$ cd angular-storybook-sample
$ npm run start

把Storybook功能加入Angular的現有專案中

npx sb init

接下來,Storybook的服務會安裝需要的相依套件

Storybook會在Package.json加上建置與執行Storybook的Script

// package.json
"scripts": {
  ...
  "build-storybook": "npm run docs:json && build-storybook"
  "storybook": "npm run docs:json && start-storybook -p 6006",
},
npm run storybook

Next

安裝完 Storybook 所產生的檔案,會在下一個單元說明,透過理解結構,讓後續操作更加順利。

Reference

Storybook官網的安裝教學:VueAngular

npx - 專案建置時期使用的全域安裝模組,可以使用 npx 取代

nvm - 透過 nvm 快速切換 node 版本


上一篇
玩轉 Storybook: Day 01 說明
下一篇
玩轉 Storybook: Day 03 專案結構
系列文
玩轉 Storybook30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言